

// 实现 React数据请求 
import React, { Component } from 'react';
import { ajax } from './../utils/ajax';

class Datademo extends Component {
    state = {
        list:null
    }
    componentDidMount(){
        // ajax
        ajax.get('http://47.104.209.44:3333/artist/list',{
            type:1,
            area:96,
            initial:'b'
        })
        .then(res=>{
            console.log(res)
            this.setState({
                list:res.data.artists
            })
        })

        // post 
        ajax.post("http://localhost:3000/api/register",{
            username:"zzzzkkkk",
            phone:18011114444,
            password:"123qwe",
            role:1,
        },{
            id:'wh2114'
        })
        .then(res=>{
            console.log(res)
        })
    }
    render() {
        const {list} = this.state 
        return (
            <div>
                <h2>实现 React数据请求 </h2>
                <h2>react 希望在  componentDidMount 请求ajax </h2>
                <div className='list' style={{width:'100%',boxSizing:"border-box",padding:15}}>
                    {
                        list&&list.map((l,i)=>{
                            return (
                                <div style={{display:'flex',background:'#f4f4f4',marginBottom:15}} className='item' key={i}> 
                                    <img src={l.picUrl} style={{width:100,height:100,marginRight:15}}  alt="" />
                                    <div style={{display:'flex',justifyContent:'center',alignItems:'center',flexDirection:"column"}}>
                                        <h2>{l.name}</h2>
                                        <p>{l.id}</p>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>

            </div>
        );
    }
}

export default Datademo;